<template>
    <div id="statistics">
        <div class="condition">
            <span>发震时间</span>
            <el-radio-group v-model="oritime" @change="handleTime()">
                <el-radio :label="item.value" v-for="(item, index) in options" :key="index + 'date'">{{ item.lable
                }}</el-radio>
            </el-radio-group>
        </div>
        <div class="header">
            <div class="left">
                <earthquake-level :type="'1'" :time="time" />
                <span class="border"></span>
                <earthquakeTrend :type="'1'" :time="time" />
            </div>
            <span class="center"></span>
            <div class="right">
                <earthquake-level :type="'2'" :time="time" />
                <span class="border"></span>
                <earthquakeTrend :type="'2'" :time="time" />
            </div>
        </div>
        <div class="footer">
            <earthquake-area :time="time" />
        </div>
    </div>
</template>

<script>
import earthquakeArea from './area.vue'
import earthquakeLevel from './level.vue'
import earthquakeTrend from './trend.vue'
import moment from 'moment';
export default {
    components: {
        earthquakeArea,
        earthquakeLevel,
        earthquakeTrend
    },
    data() {
        return {
            oritime: 'lastWeekRange',
            time: {},
            options: [
                {
                    lable: '近七天',
                    value: 'lastWeekRange',
                },
                {
                    lable: '上个月',
                    value: 'lastMonthRange',
                },
                {
                    lable: '近三个月',
                    value: 'last3MonthsRange',
                },
                {
                    lable: '近半年',
                    value: 'last6MonthsRange',
                },
                {
                    lable: '近一年',
                    value: 'lastYearRange',
                },
            ],
        }
    },
    created() {
        this.time = {
            startTime: this.getDateRange()[this.oritime][0],
            endTime: this.getDateRange()[this.oritime][1],
            type: '1'
        }
    },
    methods: {
        // 获取时间
        getDateRange() {
            // 获取当前时间
            const today = moment();
            const lastWeekStart = today.subtract(7, 'days')
            // 上一个月的起止时间
            const lastMonthStart = today.clone().subtract(1, 'month').startOf('month');
            const lastMonthEnd = today.clone().subtract(1, 'month').endOf('month');
            // 近三月的起止时间
            const last3MonthsStart = today.clone().subtract(3, 'month').startOf('month');
            const last3MonthsEnd = today.clone().subtract(1, 'month').endOf('month');
            // 近半年的起止时间
            const last6MonthsStart = today.clone().subtract(6, 'month').startOf('month');
            const last6MonthsEnd = today.clone().subtract(1, 'month').endOf('month');
            // 近一年的起止时间
            const lastYearStart = today.clone().subtract(12, 'month').startOf('month');
            const lastYearEnd = today.clone().subtract(1, 'month').endOf('month');
            // 格式化日期字符串
            const format = 'x';
            const lastWeekRange = [lastWeekStart.format(format), moment().format(format)];
            const lastMonthRange = [lastMonthStart.format(format), lastMonthEnd.format(format)];
            const last3MonthsRange = [last3MonthsStart.format(format), last3MonthsEnd.format(format)];
            const last6MonthsRange = [last6MonthsStart.format(format), last6MonthsEnd.format(format)];
            const lastYearRange = [lastYearStart.format(format), lastYearEnd.format(format)];
            // 返回日期范围
            return {
                lastWeekRange,
                lastMonthRange,
                last3MonthsRange,
                last6MonthsRange,
                lastYearRange,
            };
        },

        handleTime() {
            this.time = {
                startTime: this.getDateRange()[this.oritime][0],
                endTime: this.getDateRange()[this.oritime][1],
            }
            if (this.oritime == 'last6MonthsRange' || this.oritime == 'lastYearRange') {
                this.time.type = '2'
            } else {
                this.time.type = '1'
            }
        }
    }
}
</script>

<style lang='scss' scoped>
#statistics {
    width: 100%;
    height: 100%;
    padding: 0 20px;

    .condition {
        >span {
            margin-right: 15px;
            font-size: 14px;
            font-weight: 600;
            color: #606266;
        }
    }

    .header {
        display: flex;
        margin-top: 20px;

        >div {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            padding: 10px 20px;
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.24);
            // box-shadow: 1px 0px 5px 5px rgba(228, 230, 225, .6);
            // -webkit-box-shadow: 1px 0px 5px 5px rgba(228, 230, 225, .6);

            .border {
                height: 1px;
                width: 95%;
                margin-bottom: 10px;
                background-color: rgba(228, 230, 225, .8);
            }
        }

        .center {
            width: 20px;
            height: 80%;
        }

    }

    .footer {
        height: 320px;
        width: 100%;
        margin-top: 20px;
        padding: 10px 20px;
        background: rgba(0, 0, 0, 0.24);
        border-radius: 12px;
        // box-shadow: 1px 0px 10px 5px rgba(228, 230, 225, .6);
        // -webkit-box-shadow: 1px 0px 5px 5px rgba(228, 230, 225, .6);
    }
}
</style>